import { defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import Basic2 from './Basic2.vue';
import ColCommand from './ColCommand.vue';
import ColFormat from './ColFormat.vue';
import Filter from './Filter.vue';
import Selected from './Selected.vue';
import Selected2 from './Selected2.vue';
import Selected3 from './Selected3.vue';
import Events from './Events.vue';
export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    const model = ref('Events');

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <t-select
              v-model={model.value}
              options={[
                { label: '表头过滤', value: 'Filter' },
                { label: '操作列', value: 'ColCommand' },
                { label: 'Basic', value: 'Basic' },
                { label: 'Basic2', value: 'Basic2' },
                { label: '选择', value: 'Selected' },
                { label: '选择2', value: 'Selected2' },
                { label: '选择 之 默认选择', value: 'Selected3' },
                { label: '列设置', value: 'ColFormat' },
                { label: '事件', value: 'Events' },
              ]}
            ></t-select>
          </div>
          {'Filter' == model.value && (
            <div class='block-'>
              <h5 class='title'>表头过滤</h5>
              <Filter />
            </div>
          )}
          {'ColCommand' == model.value && (
            <div class='block-'>
              <h5 class='title'>操作列</h5>
              <ColCommand />
            </div>
          )}
          {'Basic' == model.value && (
            <div class='block-'>
              <h5 class='title'>原始</h5>
              <Basic />
            </div>
          )}
          {'Basic2' == model.value && (
            <div class='block-'>
              <h5 class='title'>联调</h5>
              <Basic2 />
            </div>
          )}
          {'Selected' == model.value && (
            <div class='block-'>
              <h5 class='title'>选择</h5>
              <Selected />
            </div>
          )}
          {'Selected2' == model.value && (
            <div class='block-'>
              <h5 class='title'>选择2</h5>
              <Selected2 />
            </div>
          )}
          {'Selected3' == model.value && (
            <div class='block-'>
              <h5 class='title'>选择 之 默认选择</h5>
              <Selected3 />
            </div>
          )}
          {'ColFormat' == model.value && (
            <div class='block-'>
              <h5 class='title'>列设置</h5>
              <ColFormat />
            </div>
          )}
          {'Events' == model.value && (
            <div class='block-'>
              <h5 class='title'>事件</h5>
              <Events />
            </div>
          )}
        </div>
      );
    };
  },
});
